<template>
   <view class="m_contianer">
        <image src="/static/english/english_top_bg.png" class="topBg"/>
        <view class="info" @click="navTo('/pages/user/index')">
            <image :src="props.cover === null ? '/static/my/default_avar.png' : props.cover"  class="cover" mode="aspectFill"/>
            <view class="name">{{props.realName}}</view>
        </view>
        <view class="shop">
            <view class="left" @click="navTo('/shop')">
                <image src="/static/my/shop_image.png" class="shop_image"/>
                <view class="des">
                    <span class="text1">商店</span>
                    <span class="text2">优选好物</span>
                </view>
            </view> 
            <view class="right" @click="navTo('/pages/order/index')">
                <image src="/static/my/order_image.png" class="order_image"/>
                <view class="des">
                    <span class="text1">我的订单</span>
                    <span class="text2">购物订单</span>
                </view>
            </view>
        </view>
        <view class="list">
            <view class="l_item" v-for="(items,index) in list" :key=" items.id" @click="navTo(items.url)">
                <view class="flex-row" style="justify-content: space-between;align-items: center; width: 100%;padding-bottom: 28rpx;">
                    <view class="left">
                        <image :src="items.icon" class="item_icon"/>
                        <text>{{ items.name }}</text>
                    </view>
                    <view class="right">
                        <image src="/static/my/arrow.png" class="arrow" />
                    </view>
                </view>
                <view class="line" v-show="index !== list.length - 1" ></view>
            </view>
        </view>
        <contactModal :show=show @onClose ="handleClose" />
   </view>
</template>

<script setup>
    import { ref } from 'vue';
	import contactModal from '@/components/contactModal/index.vue';
    import { getUserInfoApi } from '@/apis/index';
    import { hasLogin, Toast } from '@/utils/tools';
    const props = defineProps({
		realName:{
			type:String,
			default: '未登录'
		},
		cover:{
			type: String,
			default: '/static/my/default_avar.png'
		}
	})
    const show = ref(false);
    const list = [
        {id: 0, name: '个人资料', icon:'/static/my/user.png', url:'/pages/user/index'},
        {id: 3, name: '联系我们', icon:'/static/my/contact.png', url:'/'},
        // {id: 4, name: '设置', icon:'/static/my/setting.png', url:'/pages/order/order'},
        {id: 5, name: '意见反馈', icon:'/static/my/feedback.png', url:'/pages/feedback/index'}
    ];
    const getUserInfo =  async () =>{
        const { obj } = await getUserInfoApi()
        userInfo.userName = obj.realname; 
        userInfo.cover = obj.avar;
    }
    const navTo = (url) => {
        if(hasLogin()){
            if(url === '/'){
                show.value = true
            }else if(url === '/shop'){
                Toast({title: '紧锣密鼓开发中，敬请期待哦～', duration: 2000})
            }else {
                uni.navigateTo({
                    url: url
                })
            }
        } else {
            uni.navigateTo({
				url: '/pages/login/index'
			})
        }
    }
    const handleClose = ()=>{
        show.value = false
    }
</script>

<style lang="scss">
	.m_contianer{
		width:100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        .topBg{
            width: 100vw;
            height: 450rpx;
            position: fixed;
            top: 0;
            left: 0;
            z-index:-1;
        }
        .info{
            margin-top: 158rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 50rpx;
            width: calc(100vw - 50rpx);
            .cover{
                width: 118rpx;
                height: 118rpx;
                border-radius: 59rpx;
            }
            .name{
                font-weight: 500;
                font-size: 32rpx;
                color: #333333;
                line-height: 44rpx;
                margin-left: 20rpx;
            }
        }
        .shop{
            width: calc(100vw - 52rpx);
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin-top: 36rpx;
            .left{
                width: 342rpx;
                height: 206rpx;
                background: linear-gradient( 270deg, #FD8E67 0%, #F17C55 100%);
                box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
                border: 2rpx solid #FFFFFF;
                border-radius: 40rpx;
                margin-right: 14rpx;
                position: relative;
                display: flex;
                align-items: center;
                padding-left: 36rpx;
                .shop_image{
                    width: 162rpx;
                    height: 162rpx;
                    position: absolute;
                    top: 22rpx;
                    right: 16rpx;
                }
            }
            .right{
                width: 342rpx;
                height: 206rpx;
                background: linear-gradient( 270deg, #8EA8F7 0%, #7A80F7 100%);
                box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
                border: 2rpx solid #FFFFFF;
                border-radius: 40rpx;
                position: relative;
                display: flex;
                align-items: center;
                padding-left: 36rpx;
                .order_image{
                    width: 162rpx;
                    height: 162rpx;
                    position: absolute;
                    top: 22rpx;
                    right: 16rpx;
                }
            }
            .des{
                display: flex;
                flex-direction: column;
                color: #FFFFFF;
                .text1{
                    font-weight: 500;
                    font-size: 36rpx;
                    color: #FFFFFF;
                    line-height: 50rpx;
                }
                .text2{
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 40rpx;
                    margin-top: 16rpx;
                }
            }
        }
        .list{
            width: calc(100vw - 52rpx);
            background-color: #FFFFFF;
            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
            border: 2rpx solid #FFFFFF;
            border-radius: 40rpx;
            padding-top: 8rpx;
            padding-bottom: 12rpx;
            margin-top: 22rpx;
            .l_item{
                margin-left: 26rpx;
                margin-right: 24rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 32rpx;
                .left{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    .item_icon{
                        width: 48rpx;
                        height: 48rpx;
                    }
                    text{
                        margin-left: 6rpx;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                    }
                }
                .right{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    .arrow{
                        width: 48rpx;
                        height: 48rpx;
                    }
                }
                .line{
                    width: 626rpx;
                    height: 0rpx;
                    border-bottom: 1rpx solid rgba(0,0,0,0.1);
                }
            }
        }
    }
</style>